<template>
	<view class="content  ">
		<view class="p20">
			<view class="clo-000 f30 line26 tit">提现金额</view>
			<view class="line26 dis_sb mt10">
				<input type="number" placeholder-class="clo-999" class="f32" placeholder="请输入提现金额" v-model="num" :max="balance" @input="setMoney($event,num)"/>
				<view class="clo-red f24" @tap="all()">全部提现</view>
			</view>
			<view class="xian mb20"></view>
			<view class="clo-orange f22 line2">可提现金额：{{balance}}元</view>
			<view class=" f22 line2" v-if="rate > 0">提现手续费：<text class="textdu">{{procedure}}</text>元<text class="clo-999">({{rate}}%)</text></view>
			<view class=" f22 line2">实际到手金额：<text class="textdu">{{actual}}</text>元</view>
		</view>
		<view class="xian pt20"></view>
		<view class="p20">
			<view class="clo-000 f30 line26 tit">到账方式</view>
			<view class="df aic mt20 rad25 pl20 pr20 pt10 pb10">
				<view class="">微信零钱</view>
			</view>
		</view>
		<button class="ml30 mr30 bbg  mt60" @click="dialogToggle('info')">立即提现</button>
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog :showClose='false' :type="msgType"  confirmText="确定" title="消息" content="申请提现成功!" @confirm="dialogConfirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import {userInfo,systemConfig,addUserWithdrawal} from '@/utils/api.js'
	export default {
		data() {
			return {
				balance: 0,
				rate: 0,
				procedure: '0.00',
				actual: '0.00',
				num:'',
				msgType: 'success',
				openid: '',
			}
		},
		watch: {
			num(){
				if(parseFloat(this.num) > parseFloat(this.balance)){
					this.num = this.balance;
				}
				let money = this.num * this.rate / 100;
				this.procedure = money.toFixed(2);
				this.actual = (this.num - money).toFixed(2);
			}
		},
		onLoad() {
			this.get_user();
			this.get_ad_set();
		},
		methods: {
			get_ad_set(){
				systemConfig({
					name:'withdrawal_hand_fee'
				}).then(res=>{
					this.rate = res.data[0].value;
				})
			},
			get_user(){
				userInfo().then(res=>{
					this.balance = res.data.use_balance;
					this.openid = res.data.wx_openid;
				})
			},
			setMoney(e, val){
				if(val === '0.00'){
					uni.showToast({
						title: "最少输入1",
						icon: 'none',
						duration: 2000
					});
					this.num = 0;
					return false;
				}
				const m = e.target;
				const inputType = /[^\d.]/g;
				this.$nextTick(function() {
					const new_money = m.value.replace(inputType, '');
					this.num = new_money;
				})
			},
			//点击全部
			all(){
				this.num = this.balance
			},
			dialogToggle(type) {
				//字符串转数字
				let num = Number(this.num);
				if(!num || num <= 0){
					this.$showToast('请输入提现金额')
					return;
				}

				if(num > this.balance){
					this.$showToast('提现金额不可大于可提现金额');
					return;
				}
				addUserWithdrawal({
					money: num,
					commission: this.rate,
				}).then(res=>{
					this.msgType = type
					this.$refs.alertDialog.open()
				})
			},
			dialogConfirm(){
				this.$refs.alertDialog.close()
				uni.navigateBack();
			}
		}
	}
</script>

<style>
	page{background: #fff;}
	
</style>
